<template>
    <div class="address">
            <p class="size">学生位置分析</p>
            <div style="height:50px"></div>
            <div class="address1">
                <div class="Lab">
                    长庚楼人数：<span>5</span>
                </div>
                <div class="line"></div>
                <div class="Lab">
                    所占人数的百分比：<span>55%</span>
                </div>
            </div>
            <div class="address2"> 
                <div class="Lab">
                    天仪楼楼人数：<span>2</span>
                </div>
                <div class="line"></div>
                <div class="Lab">
                    所占人数的百分比：<span>10%</span>
                </div>
            </div>
            <div class="address3">
                <div class="Lab">
                    食堂人数：<span>1</span>
                </div>
                <div class="line"></div>
                <div class="Lab">
                    所占人数的百分比：<span>5%</span>
                </div>
            </div>
            <div class="address4">
                <div class="Lab">
                    宿舍人数：<span>2</span>
                </div>
                <div class="line"></div>
                <div class="Lab">
                    所占人数的百分比：<span>10%</span>
                </div>
            </div>
            <div class="address5">
                <div class="Lab">
                    操场人数：<span>2</span>
                </div>
                <div class="line"></div>
                <div class="Lab">
                    所占人数的百分比：<span>10%</span>
                </div>
            </div>
            <div class="address6">
                <div class="Lab">
                    其他地方人数：<span>2</span>
                </div>
                <div class="line"></div>
                <div class="Lab">
                    所占人数的百分比：<span>10%</span>
                </div>
            </div>
        </div>
</template>

<script>
export default {
    
}
</script>

<style scoped>
.address{
    height: 310px;
    background-color: #ffffff;
}
.address1{
    width: 250px;
    height: 110px;
    background-color: #9966CC;
    margin: 5px 5px;
}
.size{
    font-size: 20px;
    padding: 10px 5px;
    float: left;
}
.Lab{
    font-size: 20px;
    padding: 12px 10px;
    color: #ffffff;
}
.line{
    border-bottom: 1px solid gray;
}
.address2{
    width: 250px;
    height: 110px;
    background-color: #FF3366;
    position: relative;
    margin-left: 270px;
    margin-top: -115px;
}
.address3{
    width: 250px;
    height: 110px;
    background-color: #00CC00;
    position: relative;
    margin-left: 535px;
    margin-top: -110px;
}
.address4{
    width: 250px;
    height: 110px;
    background-color: #6666CC;
    position: relative;
    margin: 5px 5px;
}
.address5{
    width: 250px;
    height: 110px;
    background-color: #3399CC;
    position: relative;
    margin-left: 270px;
    margin-top: -115px;
}
.address6{
    width: 250px;
    height: 110px;
    background-color: #3399FF;
    position: relative;
    margin-left: 535px;
    margin-top: -110px;
}
</style>